<template>
	<view>
		<view class="headerbox" v-if="storeinfo">
			<image :src="(storeinfo.merch_picarr.split(',')).splice(1,2)"></image>
		</view>
		<image class="backbox" @click="back()" src="../../static/jt6.png"></image>
		<view class="storeinfo" v-if="storeinfo.merch_name">
			<view class="storebox">
				<view class="leftbox">
					<view class="namebox">{{storeinfo.merch_name}}</view>
					<view class="scorebox">
						<!-- <text style="color: #F99529;">4.6分</text> -->
						<text style="color: #555555;">已销{{storeinfo.sales_num}}</text>
					</view>
					<!-- <view class="tipbox">
						<view class="tipitem" v-for="(item,index) in cateList" :key="index">
							{{item.name}}
						</view>
					</view> -->
				</view>
				<view class="rightbox">
					<image :src="(storeinfo.merch_picarr.split(',')).splice(0,1)"></image>
					<view class="attention">
						<!-- <image src="../../static/gz.png"></image> -->
						<view>{{storeinfo.fans_num}}人关注</view>
					</view>
				</view>
			</view>

			<view class="timebox" style="margin-top: 20rpx;">
				<image src="../../static/time.png"></image>
				<view>营业时间:{{storeinfo.opening_time||'暂无'}}</view>
			</view>
			<view class="timebox" style="border-top: solid 2rpx #F1F1F1;justify-content: space-between;">
				<view style="display: flex;align-items: center;">
					<image src="../../static/dw1.png" style="width: 26rpx;height:28rpx"></image>
					<view style="width: 480rpx;">{{storeinfo.address}}</view>
				</view>
				<image @click="open(2)" src="../../static/phone.png"
					style="width: 39rpx;height: 39rpx;margin-right: 20rpx;"></image>
			</view>
		</view>
		<view style="height: 360rpx;"></view>
		<!-- <view class="coupon">
			<view class="couponitem" @click="tocoupon()">
				<view
					style="font-size: 30rpx;font-family: Source Han Sans CN-Medium, Source Han Sans CN;font-weight: 500;color: #222222;">
					优惠券</view>
				<view class="go">
					<view style="font-size: 28rpx;font-weight: 400;color: #555555;">前往领取</view>
					<image src="../../static/juan1.png"></image>
				</view>
			</view>
		</view> -->
		<view class="coupon">
			<view class="couponitem" @click="tocoupon()">
				<view style="font-size: 30rpx;font-family: Source Han Sans CN-Medium, Source Han Sans CN;font-weight: 500;
					color: #222222;width: 160rpx;text-align: center;">
					商品优惠券
					<view style="color: #555555;margin-top: 10rpx;font-size: 28rpx;">前往领取</view>
				</view>
				<image src="../../static/juan1.png"></image>

			</view>
			<view class="couponitem" style="box-shadow: inset 0px 16px 24px 2px rgba(77,172,255,0.16);"
				@click="tovoucher()">
				<view style="font-size: 30rpx;font-family: Source Han Sans CN-Medium, Source Han Sans CN;font-weight: 500;
					color: #222222;width: 160rpx;text-align: center;">
					店铺代金券
					<view style="color: #555555;margin-top: 10rpx;font-size: 28rpx;">前往购买</view>
				</view>
				<image style="width: 100rpx; height: 80rpx;" src="../../static/juan2.png"></image>
			</view>
		</view>
		<scroll-view class="typebox" scroll-x="true" @scroll="scroll" scroll-left="0">
			<view class="typelist" v-for="(item,index) in cateList" :key="index" @click="handletype(index,item)">
				<view>{{item.name}}</view>
				<view :style="{'background':index==typeindex?'#F94D29':'#FFF'}" class="tit"></view>
			</view>
		</scroll-view>
		<view class="listbox">
			<!-- <goods :list="list"></goods> -->
			<protection v-if="list.length>0" :list="list" @togoodsinfo="togoodsinfo"></protection>
			<view v-if="list.length==0" class="kong">敬请期待</view>
			<view class="carbox" v-if="list.length>0" @click="tocar()">
				<image src="../../static/car.png"></image>
			</view>
		</view>
		<view style="height: 120rpx;"></view>
		<view class="navbut">
			<view class="imgbox" @click="tohome()">
				<image src="../../static/sy5.png"></image>
				<view>首页</view>
			</view>
			<view class="imgbox" @click="toattention()">
				<!-- is_collect==0未关注 -->
				<image src="../../static/gz1.png" v-if="storeinfo.is_collect==0"></image>
				<image src="../../static/gz2.png" v-else></image>
				<view>关注</view>
			</view>
			<view class="storepay" v-if="storeinfo.id!=310">
				<view :style="{'width':storeinfo.is_takeaway==0?'90%':''}" @click="open(1)">到店付款</view>
				<view v-if="storeinfo.is_takeaway==1" @click="totakeout()">外卖配送</view>
			</view>
			<view class="storepay" v-else>
				<view style="width: 90%;" @click="allcargoods()">购物车结算</view>
			</view>
		</view>
		<uni-popup ref="popup" type="center">
			<view class="modelbox" v-if="modexindex==1">
				<view class="namebox">到店付款</view>
				<view class="inputbox">
					<view>￥</view>
					<input :value="inputmoney" @input="handlePrice" placeholder="请输入金额" />
					<view>元</view>
				</view>
				<view class="butbox">
					<view style=" color: #222222;border-top:solid  2rpx #EEEEEE;" @click="close()">取消</view>
					<view @click="toarrorder()" style="background: linear-gradient(90deg, #F94D29 0%, #F99529 100%);">确定
					</view>
				</view>
			</view>
			<view class="modelbox" v-if="modexindex==2">
				<view class="namebox">拨打电话</view>
				<view class="inputbox">
					{{storeinfo.mobile}}
				</view>
				<view class="butbox">
					<view style=" color: #222222;border-top:solid  2rpx #EEEEEE;" @click="close()">取消</view>
					<view style="background: linear-gradient(90deg, #F94D29 0%, #F99529 100%);" @click="callServer">拨打
					</view>
				</view>
			</view>
			<!-- <view class="modelbox" v-if="modexindex==1">
				<view class="namebox">核销信息</view>
				<view class="inputbox">
					<input v-model="inputmoney" placeholder="请填写订单号" />
				</view>
				<view class="imgbox">
					<view class="imgitem" v-for="(item,index) in imglist" :key="index">
						<image :src="item"></image>
						<image class="closen" src="../../static/gb.png" @click="spliceimg(index)"></image>
					</view>
					<view class="addimg" @click="uploadimg" v-if="imglist.length<1">
						<image src="../../static/add2.png"></image>
						<view>订单截图</view>
					</view>
				</view>
				<view class="butbox">
					<view style=" color: #222222;border-top:solid  2rpx #EEEEEE;" @click="close()">取消</view>
					<view @click="toarrorder()" style="background: linear-gradient(90deg, #F94D29 0%, #F99529 100%);">确定
					</view>
				</view>
			</view> -->
		</uni-popup>
	</view>
</template>

<script>
	// import goods from '../../components/goodslists.vue'
	import protection from '../../components/goods.vue'
	export default {
		components: {
			protection
		},
		data() {
			return {
				typeindex: '', //分类索引
				id: '',
				storeinfo: {}, //商家详情
				scrollTop: 0,
				old: {
					scrollTop: 0
				},
				cateList: [], //分类列表
				list: [], //商品列表
				is_recommend: null, //是否推荐热门推荐传1
				modexindex: '', //1为到店付款，2拨打电话
				inputmoney: '', //输入的金额
				page: 1,
				isdata: true,
				newpage: 1,
				newdata:true,
				cateid:'',
				imglist:[],
				freelist:[],//全球免税店的购物车
			}
		},
		onLoad(option) {
			console.log(option, 'option1')
			if (option.scene) {
				this.id = option.scene
				this.open(1)
			} else {
				this.id = option.id
			}
			console.log(option, this.id)
			this.getinfo()
		},
		onReachBottom() {
			if (this.typeindex == 0 || this.typeindex == 1) {
				this.isdata && this.getinfo()
			} else {
				this.newdata && this.getcatelist(this.cateid)
			}
		},
		methods: {
			//购物车结算，所有购物车里的商品结算
			allcargoods(){
				this.freelist = uni.getStorageSync('carlist')
				this.store_id = uni.getStorageSync('store_id')
				// goods_type 1供应商 2商家
				this.freelist = uni.getStorageSync('carlist').filter(item=>item.goods_type==2&&item.store_id==this.store_id)
				this.freelist.map(item => {
					if(item.spec_type==20&&!item.specname){
						item.specname = item.skuList.filter(sitem=>sitem.goods_sku_id==item.info.spec_id)
						item.specname[0].goods_props = JSON.parse(item.specname[0].goods_props)
						console.log(item.specname[0].goods_props)
					}
					item.select = true
				})
				this.freelist = [...[],...this.freelist]
				const tlist = this.freelist.filter((item)=>{
					return item.select
				})
				uni.navigateTo({
					url:'/pageshop/duty-free/duty-free?list='+encodeURIComponent(JSON.stringify(tlist))+'&is_car='+1
				})
				console.log(this.freelist,'freelist',tlist)
			},
			handlePrice(e){
			        this.inputmoney = (e.target.value.match(/^\d*(\.?\d{0,2})/g)[0]) || null
					e.target.value = (e.target.value.match(/^\d*(\.?\d{0,2})/g)[0]) || null
					 // 通过正则过滤小数点后两位
					// e.target.value = (e.target.value.match(/^\d*(\.?\d{0,1})/g)[0]) || null
					console.log(e.target.value,'value',this.inputmoney)
					return this.inputmoney
			 },
			handletype(index, item) {
				this.typeindex = index
				this.newpage = 1
				this.page = 1
				this.list = []
				if (index == 0) {
					this.is_recommend = null
					this.getinfo()
				} else if (index == 1) {
					this.is_recommend = 1 //是否推荐热门推荐传1
					this.getinfo()
				} else {
					this.is_recommend = null
					this.cateid = item.id
					this.getcatelist(item.id)
				}
			},
			open(n) {
				// 通过组件定义的ref调用uni-popup方法 ,如果传入参数 ，type 属性将失效 ，仅支持 ['top','left','bottom','right','center']
				this.modexindex = n
				this.$refs.popup.open('center')
			},
			close() {
				// 通过组件定义的ref调用uni-popup方法 ,如果传入参数 ，type 属性将失效 ，仅支持 ['top','left','bottom','right','center']
				this.$refs.popup.close()
				this.inputmoney = ''
			},
			//获取商圈详情
			getinfo() {
				this.$http({
					url: 'api/Wechat/storeDetail',
					data: {
						store_id: this.id,
						is_recommend: this.is_recommend == null ? '' : this.is_recommend, //是否推荐热门推荐传1
						goods_type: 2, //1获取供应商商品 2获取商家商品
						page_index: this.page,
						page_size: 12
					}
				}).then(res => {
					this.storeinfo = res.data.detail
					this.cateList = res.data.cateList
					this.cateList.unshift({
						id: '',
						name: "全部"
					}, {
						id: '',
						name: "热门推荐"
					});
					console.log(this.cateList, 'cateList', res.data.cateList, res.data)
					if (res.data.allGoodsList) {
						this.list.push(...res.data.allGoodsList)
						this.page++
						return
					}
					this.isdata = false
				})
			},
			//根据id获取分类列表
			getcatelist(id) {
				this.$http({
					url: 'api/Wechat/getGoodsByCateId',
					data: {
						cate_id: id || '',
						goods_type: 2, //1获取供应商商品 2获取商家商品
						page_index: this.newpage,
						page_size: 12,
					}
				}).then(res => {
					if(res.data.goodsList.length){
						this.list.push(...res.data.goodsList)
						this.newpage++
						return
					}
					this.newdata = false
				})
			},
			scroll: function(e) {
				console.log(e)
				this.old.scrollTop = e.detail.scrollTop
			},
			tocar() {
				uni.setStorageSync('store_id', this.id)
				uni.navigateTo({
					url: '/personalData/businesscar/businesscar?store_id=' + this.id
				})
			},
			//拨打电话
			callServer() {
				uni.makePhoneCall({
					phoneNumber: this.storeinfo.mobile
				})
			},
			//跳详情
			togoodsinfo(result) {
				uni.navigateTo({
					url: '/pageshop/goodsinfo/goodsinfo?id=' + result.id
				})
			},
			//跳首页
			tohome() {
				uni.switchTab({
					url: '/pages/businessdistrict/businessdistrict'
				})
			},
			//跳外卖配送
			totakeout() {
				uni.navigateTo({
					url: '/pageshop/takeway/takeway?id=' + this.id
				})
			},
			//跳到店支付订单
			toarrorder() {
				if (this.inputmoney > 0) {
					uni.navigateTo({
						url: '/pageshop/storearrive/storearrive?money=' + this.inputmoney + '&storeinfo=' +
							encodeURIComponent(JSON.stringify(this.storeinfo))
					})
					this.close()
				} else {
					uni.showToast({
						title: '请输入正确的金额',
						icon: 'none'
					})
				}
			},
			//关注
			toattention() {
				//is_collect==0未关注
				if (this.storeinfo.is_collect == 0) {
					this.$http({
						url: 'api/Wechat/collectMerch',
						data: {
							merch_id: this.storeinfo.id,
						}
					}).then(res => {
						this.storeinfo.fans_num++
						this.storeinfo.is_collect = 1
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					})
				} else {
					const id = []
					id.push(this.storeinfo.collect_id)
					this.$http({
						url: 'api/Wechat/cancelCollectMerch',
						data: {
							id: id,
						}
					}).then(res => {
						this.storeinfo.fans_num--
						this.storeinfo.is_collect = 0
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					})
				}
				// this.getinfo()
			},
			back() {
				const pages = getCurrentPages()
				console.log(pages)
				if (pages.length > 1) {
					uni.navigateBack({
						delta: 1
					})
				} else {
					uni.switchTab({
						url: '/pages/index/index'
					})
				}
				// uni.navigateTo({
				// 	url:'/pageshop/supermarket/supermarket'
				// })
			},
			onShareAppMessage(res) {
				if (res.from === 'button') { // 来自页面内分享按钮
					console.log(res.target)
				}
				// return {
				//   title: "邀请好友",
				//   path: '/pages/index/index?pid='+this.id
				// }
			},
			onShareTimeline() {
				return {
					title: '快乐生活，就到云智慧选',
					path: "/pages/index/index"
				}
			},
			tocoupon() {
				uni.navigateTo({
					url: '/personalData/storecoupon/storecoupon?id=' + this.id
				})
			},
			tovoucher() {
				uni.navigateTo({
					url: '/pageshop/voucher/voucher?id=' + this.id
				})
			},
			//添加图片
			uploadimg() {
				this.$upload(1).then(res => {
					this.imglist.push(...res)
					console.log(this.imglist, 'this.imglist', res) //item.file.full_url
				})
			},
			//删除图片
			spliceimg(index) {
				this.imglist.splice(index, 1)
			},
		}
	}
</script>

<style>
	page {
		background-color: #f2f2f2;
	}
</style>
<style lang="scss" scoped>
	.backbox {
		position: fixed;
		left: 30rpx;
		width: 44rpx;
		height: 44rpx;
		top: 50rpx;
		z-index: 9;
	}

	.headerbox {
		width: 750rpx;
		height: 422rpx;

		image {
			width: 750rpx;
			height: 422rpx;
		}
	}

	.storeinfo {
		width: 650rpx;
		padding: 0 20rpx;
		height: 380rpx;
		background: #FFFFFF;
		border-radius: 10rpx;
		margin: -50rpx auto 0 auto;
		left: 50%;
		transform: translate(-50%, 0);
		position: absolute;

		// display: flex;
		// align-items: center;
		.storebox {
			display: flex;
			align-items: center;

			.leftbox {
				width: 530rpx;

				.namebox {
					font-size: 36rpx;
					font-family: Source Han Sans CN-Medium, Source Han Sans CN;
					font-weight: 500;
					color: #000000;
					line-height: 90rpx;
					-webkit-line-clamp: 1;
					display: -webkit-box;
					-webkit-box-orient: vertical;
					overflow: hidden;
					text-overflow: ellipsis;
				}

				.scorebox {
					font-size: 26rpx;
					font-family: Source Han Sans CN-Regular, Source Han Sans CN;
					font-weight: 400;

					>text {
						margin-right: 24rpx;
					}
				}

				.tipbox {
					display: flex;
					margin-top: 20rpx;

					.tipitem {
						height: 34rpx;
						background: linear-gradient(90deg, #FFE9E1 0%, #FFF8F5 100%);
						border-radius: 8rpx;
						width: fit-content;
						padding: 0 10rpx;
						line-height: 34rpx;
						margin-right: 10rpx;
						font-size: 18rpx;
						font-family: Source Han Sans CN-Regular, Source Han Sans CN;
						font-weight: 400;
						color: #FF6229;
					}
				}
			}

			.rightbox {
				width: 120rpx;
				text-align: center;

				image {
					width: 88rpx;
					height: 88rpx;
					border-radius: 7px;
				}

				.attention {
					display: flex;
					align-items: center;
					font-size: 24rpx;
					font-family: PingFang SC-Medium, PingFang SC;
					font-weight: 500;
					color: #444444;

					image {
						width: 33rpx;
						height: 25rpx;
						margin-right: 10rpx;
					}
				}
			}
		}

		.timebox {
			height: 88rpx;
			display: flex;
			align-items: center;
			font-size: 28rpx;
			font-family: Source Han Sans CN-Regular, Source Han Sans CN;
			font-weight: 400;
			color: #222222;

			image {
				width: 29rpx;
				height: 29rpx;
				margin: 0 16rpx 0 22rpx;
			}
		}
	}

	// .coupon {
	// 	width: 690rpx;
	// 	margin: 0 auto 24rpx auto;
	// 	display: flex;
	// 	align-items: center;
	// 	justify-content: space-between;

	// 	.couponitem {
	// 		width: 630rpx;
	// 		padding: 0 30rpx;
	// 		height: 84rpx;
	// 		background: #FFFFFF;
	// 		// box-shadow: inset 0rpx 16rpx 24rpx 2rpx rgba(249,149,41,0.16);
	// 		border-radius: 10rpx;
	// 		font-size: 30rpx;
	// 		font-family: Source Han Sans CN-Medium, Source Han Sans CN;
	// 		font-weight: 500;
	// 		color: #222222;
	// 		display: flex;
	// 		align-items: center;
	// 		justify-content: space-between;

	// 		.go {
	// 			display: flex;
	// 			align-items: center;

	// 			image {
	// 				width: 68rpx;
	// 				height: 44rpx;
	// 				margin-left: 20rpx;
	// 			}
	// 		}
	// 	}
	// }
	.coupon {
		width: 690rpx;
		margin: 0 auto 24rpx auto;
		display: flex;
		align-items: center;
		justify-content: space-between;

		.couponitem {
			width: 332rpx;
			height: 160rpx;
			background: #FFFFFF;
			box-shadow: inset 0rpx 16rpx 24rpx 2rpx rgba(249, 149, 41, 0.16);
			border-radius: 10rpx;
			display: flex;
			align-items: center;
			justify-content: center;

			image {
				width: 118rpx;
				height: 72rpx;
				margin-left: 20rpx;
			}
		}
	}

	.typebox {
		width: 100%;
		height: 98rpx;
		display: flex;
		justify-content: space-around;
		background-color: #FFF;
		white-space: nowrap;

		.typelist {
			margin-top: 20rpx;
			width: fit-content;
			display: inline-block;
			text-align: center;
			margin: 20rpx 10rpx 0 10rpx;

			.tit {
				// width: 100%;
				height: 2rpx;
				background: #FFF;
				border-radius: 2rpx;
				margin-top: 10rpx;
			}
		}
	}

	.listbox {
		background-color: #FFF;
		width: 750rpx;

		.kong {
			text-align: center;
			background-color: #f2f2f2;
			color: #666666;
			line-height: 100rpx;
		}

		.carbox {
			position: fixed;
			z-index: 9;
			width: 80rpx;
			height: 80rpx;
			border-radius: 100%;
			background-color: #F94D29;
			right: 20rpx;
			bottom: 200rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			line-height: 80rpx;

			image {
				width: 50rpx;
				height: 50rpx;
				margin: 0 auto;
				line-height: 80rpx;
			}
		}
	}

	.navbut {
		width: 750rpx;
		height: 110rpx;
		background: #FFFFFF;
		display: flex;
		position: fixed;
		bottom: 0;
		z-index: 99;

		.imgbox {
			width: 15%;
			text-align: center;
			font-size: 24rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 500;
			color: #444444;

			image {
				width: 56rpx;
				height: 56rpx;
			}
		}

		.storepay {
			width: 67%;
			margin-top: 8rpx;
			display: flex;
			align-items: center;
			justify-content: space-around;

			>view {
				width: 226rpx;
				height: 90rpx;
				background: linear-gradient(267deg, #F94D29 0%, #F99529 100%);
				border-radius: 46rpx;
				font-size: 30rpx;
				font-family: Source Han Sans CN-Medium, Source Han Sans CN;
				font-weight: 500;
				color: #FFFFFF;
				line-height: 90rpx;
				text-align: center;
			}
		}
	}

	.modelbox {
		width: 528rpx;
		// height: 289rpx;
		background: #FFFFFF;
		border-radius: 14rpx;
		margin: 0 auto;
		padding-top: 30rpx;

		.namebox {
			width: 128rpx;
			margin: 0rpx auto 30rpx auto;
			height: 44rpx;
			font-size: 32rpx;
			font-family: PingFang SC-Bold, PingFang SC;
			font-weight: bold;
			color: #222222;
			background: linear-gradient(180deg, #FFF 70%, #ffebe7 100%);
		}
		.imgbox{
			display: flex;
			flex-wrap: wrap;
			justify-content: space-around;
			.imgitem{
				width: 215rpx;
				height: 215rpx;
				margin-top: 10rpx;
				position: relative;
				image{
					width: 215rpx;
					height: 215rpx;
				}
				.closen {
					width: 40rpx;
					height: 40rpx;
					position: absolute;
					right: 10rpx;
					top: 0;
				}
			}
			.addimg{
				width: 215rpx;
				height: 215rpx;
				font-size: 28rpx;
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 400;
				color: #888888;
				text-align: center;
				margin-top: 10rpx;
				image{
					width: 48rpx;
					height: 48rpx;
					margin: 40rpx 0 20rpx 0;
				}
			}
		}

		.inputbox {
			width: 430rpx;
			height: 84rpx;
			padding: 0 20rpx;
			background: #F7F7F7;
			border-radius: 16rpx;
			margin: 0 auto;
			display: flex;
			align-items: center;
		}

		.butbox {
			display: flex;
			height: 78rpx;
			width: 528rpx;
			margin-top: 52rpx;

			>view {
				height: 78rpx;
				width: 264rpx;
				background-color: #FFF;
				font-size: 30rpx;
				font-family: Source Han Sans CN-Regular, Source Han Sans CN;
				font-weight: 400;
				color: #FFFFFF;
				text-align: center;
				line-height: 78rpx;
			}
		}
	}
</style>